<template>
  <div class="todaynew">
        <div class="new_top">
            <h1>今日上新</h1>
        </div>
        <div class="new_bot">
            <scroll-view class="scroll_box" scroll-x=true>
                <div class="items">
                    11
                </div>
                <div class="items">
                    11
                </div>
                <div class="items">
                    11
                </div>
            </scroll-view>
        </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .todaynew{
        width: 95%;
        margin: 20px auto;
        height: 520rpx;
        background: #fff;
        border-radius: 20rpx;
        .new_top{
            padding: 16rpx 0 0 30rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            >h1{
                font-weight: bold;
                font-size: 34rpx;
            }
        }
        .new_bot{
            padding-left: 30rpx;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            height: 400rpx;
            .scroll_box{
                white-space: nowrap;   //????
                height: 100%;
                .items{
                    width: 240rpx;
                    height: 400rpx;
                    background: rgb(248, 186, 163);
                    margin-right: 30rpx;
                    display: inline-block;
                }
            }
        }
    }
</style>